<%@ page import="coe.pumbaa.User" %>
<%@ page import="coe.pumbaa.Role" %>
<% def springSecurityService = application.getAttribute("org.codehaus.groovy.grails.APPLICATION_CONTEXT").getBean("springSecurityService") %>

          <fieldset style="width: 48%; float: left; margin-right: 3%;">
            <label>Email</label>
            <g:textField name="email" required="" value="${userInstance?.email}" style="width: 92%;"/>
          </fieldset>
          <fieldset style="width: 48%; float: left;">
            <label>Password</label>
            <g:field type="password" name="password" required="" value="${userInstance?.password}" style="width: 92%;"/>
          </fieldset><br>
          <fieldset style="width: 48%; float: left; margin-right: 3%;">
            <label>First name</label>
            <g:textField name="fname" required="" value="${userInstance?.fname}" style="width: 92%;"/>
          </fieldset>
          <fieldset style="width: 48%; float: left;">
            <label>Last name</label>
            <g:textField name="lname" required="" value="${userInstance?.lname}" style="width: 92%;"/>
          </fieldset><br>
          <fieldset style="width: 48%; float: left; margin-right: 3%;">
            <label>Student ID</label>
            <g:textField name="studentID" value="${userInstance?.studentID}" style="width: 92%;"/>
          </fieldset>
          <fieldset style="width: 48%; float: left;">
            <label>Phone number</label>
            <g:textField name="phoneNO" required="" value="${userInstance?.phoneNO}" style="width: 92%;"/>
          </fieldset><br>
          <fieldset>
            <label>Office</label>
            <textarea rows="12" name="office">${userInstance?.office}</textarea>
          </fieldset>
          <fieldset>
            <label>Signature<input type="button" id="addPic" class="btn_cam" onClick="addPicTag()"/></label>
            <textarea rows="12" name="signature">${userInstance?.signature}</textarea>
          </fieldset>
          <fieldset style="width: 48%; float: left; margin-right: 3%;">
            <label>Picture</label>
            <!-- Picture Render -->
            <img src="${createLink(controller:'user', action:'viewImage', id:userInstance?.id)}" width="200" height="265"/>
          </fieldset>
          <fieldset style="width: 48%; float: left;">
            <label>Display name</label>
            <g:textField name="displayName" required="" value="${userInstance?.displayName}" style="width: 92%;"/>
          </fieldset>
          <fieldset style="width: 48%; float: left;">
            <label>Upload Picture</label>
            <input type="file" id="avatar" name="avatar" style="width: 92%;"/><br>ขนาดภาพควรใช้ขนาด 200x265
          </fieldset>
          <g:if test="${!isEdit}">
          <fieldset style="width: 48%; float: left;">
            <label>Role</label>
            <g:select id="role" name="role.id" from="${roleList}" optionKey="id" optionValue="type" required="" value="${userInstance?.role?.id}" class="many-to-one"/>
          </fieldset>
          </g:if>
<script>

    function addPicTag() {
      document.userForm.signature.value = document.userForm.signature.value+'[img]url picture[/img]';
    }
</script>